const path = require('path')
const MiniCssExtraPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const OptimizeCSSAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')

module.exports = {
  mode: "none",
  entry: "./src/index.js",
  output: {
    // filename: "bundle[hash].js",// 项目级别的 hash ，只有项目任何地方发生改变打包的 hash 都会发生变化
    // filename: "bundle[chunkhash].js", // chunkhash，同入口 hash 都是相同的，入口会发生被动改变
    // filename: "bundle[contenthash].js", // 文件级别的 hash ，文件内容相同 hash 不变
    filename: "bundle[contenthash:8].js", // 通过 :number 指定 hash 长度
    path: path.join(__dirname, "dist")
  },
  module: {
    rules: [{
      test: /.css$/,
      use: [
        MiniCssExtraPlugin.loader,
        'css-loader'
      ]
    }]
  },
  plugins: [
    // new OptimizeCSSAssetsWebpackPlugin(), // 任何情况下都会工作
    new HtmlWebpackPlugin(),
    new MiniCssExtraPlugin()
  ],
  optimization:{
    minimizer:[ // 给 minimizer 赋值会覆盖内置的压缩插件，需要手动加入 TerserWebpackPlugin
      new OptimizeCSSAssetsWebpackPlugin(),
      new TerserWebpackPlugin()
    ]
  }
}
